<template>
  <div id="chat_record" class="account">
        <h3>沟通详情 <span @click="$router.push('/account/chats')">返回</span></h3>

        <div class="tips">公司: {{companyName}} ,  职位: {{positionName}}</div>

        <div class="search" style="margin-top: 20px;">
            <span>
                <el-input type="text"
                        v-model="msg.content"
                        placeholder="请输入消息内容"
                        class="searc-input mr25"
                    />
            </span>
            <button class="green-bg white pl10 pr10 pt10 pb10 radius ml20"
                @click="sendMsg"
            >
                发送
            </button>
        </div>

      <div class="tab-content">
           <dl>
                <dt>
                    <span>发件人</span>
                    <span>消息内容</span>
                    <span>时间</span>
                </dt>
                <dd v-for="(item, index) in list" :key="index">
                    <span style="overflow: hidden;">
                        <em>{{item.accountId == null ? item.companyName : "我"}}</em>
                    </span>
                    <span>
                        <em>{{item.content}}</em>
                    </span>
                    <span>
                        <em>{{parseTime(new Date(item.createTime))}}</em>
                    </span>
                </dd>
           </dl>
      </div>
  </div>
</template>

<script>
import {chatList, sendMsg} from "@/api/base";
export default {
    data(){
        return{
            params: {
                componeyName: '132123321231',
            },
            pages:{
                limit: '10',
                page: '1',
                params:'',
                msgId: this.$route.params.id,
            },
            msg:{
              "content": "",
              "msgId": this.$route.params.id,
            },
            list:'',
            companyName: this.$route.query.companyName,
            positionName: this.$route.query.positionName
        }
    },
    methods:{
        init(){
            chatList(this.pages).then(res => {
                this.list = res.datas;
            })
        },
        sendMsg(){
            sendMsg(this.msg).then(res => {
                this.msg.content = ''
                this.init()
            })
        }
    },
    created(){
        this.init();
        this.$emit('navIndex', 7);
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.account {
  float: right;
  width: 970px;
  padding: 30px 35px;
  background-color: #fff;
  color: #787878;

  h3{
      span{
          font-style: normal;
          font-size: 14px;
          float: right;
          font-weight: 400;
          cursor: pointer;
      }
  }
  .tips{
      margin-top: 20px;
      font-size: 14px;
      color: #999;
  }
}
.search{
    span{
        width: 300px;
        .searc-input{
            width: 300px;
        }
    }
    button{
      background: #3EACC4;
      color: #fff;
      padding: 8px 15px;
      border-radius: 2px;
    }
}
.tab-content{
    margin-top: 28px;
    font-size: 14px;
    color: #787878;
    dl{
        dt{
            width: 900px;
            height: 50px;
            line-height: 50px;
            background: #F7F7F7;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 35%;
                    height: 22px;
                    text-indent: 5em;
                }
                &:nth-child(2){
                    width: 45%;
                }
                &:nth-child(3){
                    width: 20%;
                }
            }
        }
        dd{
            height: 60px;
            // line-height: 50px;
            border-bottom: 1px solid #E8E8E8;

            overflow: hidden;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 35%;
                    padding-left: 20px;
                }
                &:nth-child(2){
                    width: 45%;
                }
                &:nth-child(3){
                    width: 20%;
                }
                em{
                    font-style: normal;   
                    line-height: 60px;
                    display: block;
                    line-height: 1.8;
                    margin-top: 20px;
                }

                a{
                    line-height: 60px;
                    display: block;
                }
            }

            &.no-data{
                span{
                    width: 100%;
                    height: 50px;
                    text-align: center;
                }
            }
        }
    }
}
.mr25{
    margin-right: 25px;
}
</style>